<template>
  <div>
    <p>接口测试</p>
    <div class="tests">
      <div class="test_left">
        <div class="name">
          <p>接口名称：api1</p>
          <a-descriptions bordered>
            <a-descriptions-item label="Request URL" :span="3"></a-descriptions-item>
            <a-descriptions-item label="请求方式" :span="3"></a-descriptions-item>
          </a-descriptions>
          <!-- <a-table :columns="columns" :data-source="data" :pagination="false" bordered :show-header="false" size="small" /> -->
        </div>
        <div class="parameter">
          <p>输入参数</p>
          <a-table :columns="parameter" :data-source="parameter_value" :pagination="false" bordered size="small">
            <template #bodyCell="{ column }">
              <template v-if="column.dataIndex === 'value'">
                <a-input type="text" />
              </template>
            </template>
          </a-table>
        </div>
        <div class="request_body">
          <p>请求Body</p>
          <a-table :columns="request_body" :data-source="request_body_value" bordered :pagination="false" height="10%" :scroll="{ y: 100 }" size="small">
            <template #bodyCell="{ column }">
              <template v-if="column.dataIndex === 'value'">
                <a-input type="text" />
              </template>
            </template>
          </a-table>
          <!-- <a-table :columns="columns3" :data-source="data3" :pagination="false" bordered size="small"> 
           </a-table> -->
        </div>
        <a-button type="primary" class="button">测试</a-button>
      </div>
      <div class="test_right">
        <div class="result_top">返回结果(JSON)</div>
        <div class="result">11111</div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  // const visible = ref<boolean>(false);

  // const showModal = () => {
  //   visible.value = true;
  // };

  // const handleOk = (e: MouseEvent) => {
  //   console.log(e);
  //   visible.value = false;
  // };
  const parameter = [
    { title: '参数名称', dataIndex: 'name' },
    { title: '数据类型', dataIndex: 'type' },
    { title: '参数位置', dataIndex: 'location' },
    { title: '是否必填', dataIndex: 'required' },
    { title: '测试值', dataIndex: 'value' },
  ];
  const parameter_value = [
    { key: 1, name: 'id', type: 'int', location: 'query', required: '是', value: '测试值' },
    { key: 2, name: 'name', type: 'string', location: 'query', required: '是', value: '测试值' },
  ];
  const request_body = [
    {
      title: '参数名称',
      dataIndex: 'name',
      key: 'name',
      width: '20%',
    },
    {
      title: '数据类型',
      dataIndex: 'type',
      key: 'type',
      width: '20%',
    },
    {
      title: '是否必填',
      dataIndex: 'required',
      key: 'required',
      width: '20%',
    },
    {
      title: '测试值',
      dataIndex: 'value',
      key: 'value',
    },
  ];
  const request_body_value = [
    {
      key: 1,
      name: 'data1',
      type: 'Object',
      required: '',
      children: [
        {
          key: 11,
          name: 'name',
          type: 'String',
          required: '是',
        },
        {
          key: 12,
          name: 'sex',
          type: 'Int',
          required: '否',
        },
      ],
    },
    {
      key: 2,
      name: 'date2',
      type: 'String',
      required: '否',
    },
  ];
</script>
<style lang="less" scoped>
  .tests {
    display: flex;

    .test_left {
      padding: 0 2% 2% 2%;
      // border: 1px solid black;
      width: 60%;
      // .name {
      //   padding-top: 10px;
      // }
      .parameter {
        padding-top: 5%;
      }

      .request_body {
        padding-top: 5%;
      }

      .button {
        margin-top: 5%;
      }
    }

    .test_right {
      border: 1px solid black;
      width: 40%;

      .result_top {
        height: 8%;
        font-size: 120%;
        text-align: center;
        line-height: 280%;
      }

      .result {
        width: 100%;
        height: 92%;
        color: aliceblue;
        background-color: black;
      }
    }
  }

  :deep(.ant-descriptions-item-label) {
    width: 30%;
  }
</style>
